<script setup lang="ts">
import {reactive, ref} from "vue";

const option = reactive({
  visible: false,
  okLoading: false
})

const formData = ref<any>()

const init = (data: any) => {
  formData.value = data
  option.visible = true
}

defineExpose({
  init
})
</script>

<template>
  <a-modal
      :visible="option.visible"
      title="详情"
      title-align="start"
      :mask-closable="false"
      :ok-loading="option.okLoading"
      ref="modalRef"
      :esc-to-close="false"
      :width="600"
      :hide-cancel="true"
      @cancel="option.visible = false"
      @ok="option.visible = false"
      @close="option.visible = false"
  >
    <div class="detail-container">
      <div class="detail-item">
        <span class="label">姓名：</span>
        <span class="content">{{formData?.trueName}}</span>
      </div>
      <div class="detail-item">
        <span class="label">电话：</span>
        <span class="content">{{formData?.phone}}</span>
      </div>
      <div class="detail-item">
        <span class="label">来源：</span>
        <span class="content">{{formData?.city}}</span>
      </div>
      <div class="detail-item">
        <span class="label">领域：</span>
        <span class="content">{{formData?.channel}}</span>
      </div>
      <div class="detail-item">
        <span class="label">单位：</span>
        <span class="content">{{formData?.unit}}</span>
      </div>
      <div class="detail-item">
        <span class="label">职务：</span>
        <span class="content">{{formData?.post}}</span>
      </div>
      <div class="detail-item">
        <span class="label">职称：</span>
        <span class="content">{{formData?.title}}</span>
      </div>
      <div class="detail-item">
        <span class="label">备注：</span>
        <span class="content">{{formData?.remark}}</span>
      </div>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
.detail-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制项之间的间距 */
}

.detail-item {
  display: flex;
  align-items: flex-start;
}

.label {
  font-weight: bold;
  width: 70px; /* 控制标签宽度，可根据需要调整 */
  flex-shrink: 0; /* 避免宽度压缩 */
}

.content {
  flex: 1; /* 内容自适应剩余宽度 */
  word-break: break-word; /* 长内容时进行自动换行 */
}
</style>